<!-- bookings.html -->
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>雨姐航空 - 东北雨姐给你带派的体验</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <style>
        body {
            min-height: 100vh;
            margin: 0;
            font-family: 'Segoe UI', 'Microsoft YaHei', Arial, sans-serif;
            background: linear-gradient(135deg, #0a174e 0%, #133b5c 100%);
            color: #fff;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        .header {
            text-align: center;
            padding: 40px 0 20px 0;
        }
        .header h1 {
            font-size: 2.8em;
            font-weight: bold;
            color: #ffe227;
            letter-spacing: 2px;
            margin-bottom: 8px;
            text-shadow: 2px 2px 8px #0a174e44;
        }
        .subtitle {
            color: #ffe227;
            font-size: 1.2em;
            margin-bottom: 18px;
            font-weight: 500;
            letter-spacing: 1px;
        }
        .card {
            background: #11204d;
            border-radius: 18px;
            box-shadow: 0 4px 24px 0 #0a174e33;
            max-width: 1100px;
            margin: 30px auto 0 auto;
            padding: 32px 36px 28px 36px;
            border: 2px solid #ffe227;
        }
        .card-header {
            background: linear-gradient(45deg, #2980b9, #6dd5fa);
            color: #fff;
            padding: 20px;
            text-align: center;
        }
        .card-header h2 {
            font-size: 1.5em;
            margin: 0;
        }
        .table-container {
            overflow-x: auto;
        }
        table {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0;
            background: transparent;
            color: #fff;
        }
        th, td {
            padding: 14px 10px;
            text-align: center;
        }
        th {
            background: #0a174e;
            color: #ffe227;
            font-size: 1.08em;
            border-bottom: 2px solid #ffe227;
        }
        tr {
            background: #133b5c;
            transition: background 0.2s;
        }
        tr:hover {
            background: #ffe22722;
        }
        td {
            border-bottom: 1px solid #23395d;
        }
        .status-badge {
            padding: 5px 12px;
            border-radius: 20px;
            font-size: 0.85em;
            font-weight: 600;
            text-align: center;
            display: inline-block;
            min-width: 80px;
        }
        .status-0 { background: #b2bec3; color: #0984e3; }
        .status-1 { background: #74b9ff; color: #fff; }
        .status-2 { background: #00b894; color: #fff; }
        .status-3 { background: #0984e3; color: #fff; }
        .status-4 { background: #636e72; color: #fff; }
        .action-buttons {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
        }
        .btn {
            border: none;
            border-radius: 20px;
            padding: 8px 22px;
            font-size: 1em;
            font-weight: 500;
            margin: 0 4px;
            cursor: pointer;
            transition: background 0.2s, color 0.2s;
            box-shadow: 0 2px 8px #0a174e22;
        }
        .btn-view {
            background: #ffe227;
            color: #0a174e;
        }
        .btn-view:hover {
            background: #fff;
            color: #0a174e;
        }
        .btn-edit {
            background: #0a174e;
            color: #ffe227;
            border: 1.5px solid #ffe227;
        }
        .btn-edit:hover {
            background: #ffe227;
            color: #0a174e;
        }
        .btn-delete {
            background: #ffb300;
            color: #0a174e;
        }
        .btn-delete:hover {
            background: #ffe227;
            color: #0a174e;
        }
        input[type="text"], input[type="number"] {
            background: #23395d;
            color: #ffe227;
            border: 1.5px solid #ffe227;
            border-radius: 20px;
            padding: 10px 14px;
            font-size: 1em;
            outline: none;
            transition: border 0.2s;
        }
        input[type="text"]:focus, input[type="number"]:focus {
            border: 2px solid #ffe227;
            background: #11204d;
        }
        .empty-state {
            text-align: center;
            padding: 60px 20px;
            color: #636e72;
        }
        .empty-state i {
            font-size: 4em;
            margin-bottom: 20px;
            opacity: 0.5;
        }
        .footer {
            text-align: center;
            color: #ffe227;
            margin: 40px 0 10px 0;
            font-size: 1.1em;
            letter-spacing: 1px;
            text-shadow: 1px 1px 6px #0a174e44;
        }
        @media (max-width: 768px) {
            .container { padding: 10px; }
            .header h1 { font-size: 2em; }
            .action-buttons { flex-direction: column; }
            .btn { text-align: center; justify-content: center; }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1><i class="fas fa-snowflake"></i> 雨姐航空 <i class="fas fa-snowflake"></i></h1>
            <div class="subtitle">东北雨姐给你带派的体验</div>
            <form th:action="@{/bookings/searchByUsername}" method="get" style="margin: 20px auto 0; max-width: 400px; display: flex; gap: 10px;">
                <input type="text" name="username" th:value="${username}" placeholder="请输入用户名" style="flex:1; padding: 10px 14px; border-radius: 20px; border: 1.5px solid #3a7bd5; font-size: 1em;">
                <button type="submit" class="btn btn-edit" style="min-width: 90px;"><i class="fas fa-user"></i> 用户名查询</button>
            </form>
        </div>
        <div class="card">
            <div class="card-header">
                <h2><i class="fas fa-list"></i> <span th:text="${pageInfo.pageTitle}">订单列表</span></h2>
            </div>
            
            <!-- 提示消息 -->
            <div th:if="${param.message == 'already_cancelled'}" 
                 style="background: #636e72; color: #fff; padding: 15px; margin: 20px; border-radius: 10px; text-align: center;">
                <i class="fas fa-info-circle"></i> 该订单已经取消，无法重复退订
            </div>
            
            <div class="table-container">
                <div th:if="${#lists.isEmpty(bookings)}" class="empty-state">
                    <i class="fas fa-icicles"></i>
                    <h3>暂无订单数据</h3>
                    <p>还没有任何订单记录，快来创建第一个订单吧！</p>
                </div>
                <table th:if="${not #lists.isEmpty(bookings)}">
                    <thead>
                        <tr>
                            <th>订单ID</th>
                            <th>订单编号</th>
                            <th>用户名</th>
                            <th>舱位</th>
                            <th>订单状态</th>
                            <th>总金额</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr th:each="booking : ${bookings}">
                            <td th:text="${booking.id}"></td>
                            <td th:text="${booking.booking_no}"></td>
                            <td th:text="${booking.username}"></td>
                            <td>
                                <span th:switch="${booking.seat_class_id}">
                                    <span th:case="1">经济舱</span>
                                    <span th:case="2">商务舱</span>
                                    <span th:case="3">头等舱</span>
                                    <span th:case="*">未知</span>
                                </span>
                            </td>
                            <td>
                                <span class="status-badge" 
                                      th:class="${'status-' + booking.status}"
                                      th:text="${booking.status == 0 ? '待支付' :
                               booking.status == 1 ? '已付定金' :
                               booking.status == 2 ? '已全款' :
                                               booking.status == 3 ? '已出票' : '已取消'}">
                                </span>
                            </td>
                            <td th:text="${booking.total_amount}"></td>
                            <td>
                                <div class="action-buttons">
                                    <a th:href="@{/bookings/{id}(id=${booking.id})}" class="btn btn-view"><i class="fas fa-eye"></i> 查看</a>
                                    <span th:if="${booking.status == 4}" class="btn btn-delete" style="background: #636e72; cursor: not-allowed; opacity: 0.7;">
                                        <i class="fas fa-ban"></i> 已取消
                                    </span>
                                    <a th:if="${booking.status != 4}" th:href="@{/bookings/{id}/cancel(id=${booking.id})}" 
                                       onclick="return confirm('确定要退订此订单吗？')" class="btn btn-delete">
                                        <i class="fas fa-times"></i> 退订
                                    </a>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
                
                <!-- 分页导航 -->
                <div th:if="${pageInfo != null}" class="pagination-container" style="margin-top: 30px; text-align: center;">
                    <div class="pagination-info" style="margin-bottom: 20px; color: #ffe227;">
                        <span>活跃订单: <span th:text="${pageInfo.activeBookingsCount}">0</span> 条</span>
                        <span style="margin-left: 20px;">已取消订单: <span th:text="${pageInfo.cancelledBookingsCount}">0</span> 条</span>
                    </div>
                    <div class="pagination-buttons">
                        <a th:if="${pageInfo.currentPage > 1}" 
                           th:href="@{/bookings(page=${pageInfo.currentPage - 1})}" 
                           class="btn btn-edit" style="margin-right: 10px;">
                            <i class="fas fa-chevron-left"></i> 上一页
                        </a>
                        <span class="page-indicator" style="color: #ffe227; margin: 0 15px;">
                            第 <span th:text="${pageInfo.currentPage}">1</span> 页，共 <span th:text="${pageInfo.totalPages}">2</span> 页
                        </span>
                        <a th:if="${pageInfo.currentPage < pageInfo.totalPages}" 
                           th:href="@{/bookings(page=${pageInfo.currentPage + 1})}" 
                           class="btn btn-edit" style="margin-left: 10px;">
                            下一页 <i class="fas fa-chevron-right"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer">
            <p><i class="fas fa-snowflake"></i> 雨姐航空 <i class="fas fa-snowflake"></i></p>
        </div>
    </div>
</body>
</html>